<template>
  <div class="comment_pop" @click.self="isShow()">
    <ul>
      <li class="reply" @click="reply()">回复评论</li>
      <li class="share" @click="share()">分享评论</li>
      <li class="clone" @click="clone()">复制评论</li>
      <!-- <li class="report" @click="report()">举报评论</li> -->
    </ul>
    <div id="agent_mask" style="opacity: 0;position: absolute;left:-500px;">{{pop_data.content}}</div>
    <input
      id="agentstr_mask_input"
      type="text"
      style="opacity: 0;position: absolute;left:-500px;"
      :value="pop_data.content"
    />
  </div>
</template>
<script>
export default {
  props: ["pop_data"],
  data() {
    return {};
  },
  methods: {
    // 复制函数
    copy() {
      if (navigator.userAgent.match(/(iPhone|iPod|iPad|iphone os|ios);?/i)) {
        window.getSelection().removeAllRanges();
        var agentcode = document.getElementById("agent_mask");
        var range = document.createRange();
        range.selectNode(agentcode);
        window.getSelection().addRange(range);
        var success = document.execCommand("Copy", false, null);
        window.getSelection().removeAllRanges();
      } else {
        var agentcode = document.getElementById("agentstr_mask_input");
        agentcode.select();
        document.execCommand("Copy", false, null);
      }
      this.$emit("copyEmit");
    },
    // 控制组件显隐
    isShow() {
      this.$emit("isDisplay");
    },
    // 回复评论
    reply() {
      this.$store.commit("comment/setT", 2);
      this.$store.commit("comment/setCommentId", this.pop_data.commentId);
      this.$store.commit(
        "comment/setPlaceholder",
        "回复" + this.pop_data.user.nickname + ":"
      );
      this.$emit("reply");
      this.$emit("isDisplay");
    },
    // 分享评论
    share() {
      this.$emit("isDisplay");
    },
    // 复制评论
    clone() {
      this.copy();
      this.$emit("isDisplay");
    },
    // 举报评论
    report() {
      this.$emit("isDisplay");
    }
  }
};
</script>
<style lang="scss" scoped>
.comment_pop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1001;
  background-color: rgba($color: #000000, $alpha: 0.5);
  ul {
    background-color: #fff;
    width: 85%;
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 2.8rem;
    padding: 0.2rem 0.4rem;
    box-sizing: border-box;
    border-radius: 0.1rem;
    li {
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #666;
      text-align: left;
    }
  }
}
</style>